<template>
  <div id="subpage" v-loading="loading">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <b>课程管理</b>
        </el-breadcrumb-item>
        <el-breadcrumb-item to="/service/index">客服列表</el-breadcrumb-item>
        <el-breadcrumb-item>添加客服</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <div class="content">
      <div class="xcx-head">
        <span class="title">添加客服</span>
        <el-button @click="back()" size="small" icon="el-icon-back" type="primary">返回列表</el-button>
      </div>
      <div class="xcx-content">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
          style="width: 70%;">
          <el-form-item label="客服名称：" prop="title">
            <el-input v-model="ruleForm.title"></el-input>
          </el-form-item>
          <el-form-item label="所属楼盘：" prop="house_id">
            <el-select style="width: 100%;" v-model="ruleForm.house_id" placeholder="请选择">
              <el-option label="请选择" :value="0" placeholder="请选择"></el-option>
              <el-option v-for="item in houseData" :key="item.id" :label="item.title" :value="item.id"
                placeholder="请选择">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="排序：" prop="orders">
            <el-input v-model="ruleForm.orders"></el-input>
          </el-form-item>
          <el-form-item label="手机号：" prop="mobile">
            <el-input v-model="ruleForm.mobile"></el-input>
          </el-form-item>
          <!-- <el-form-item label="微信号：" prop="weixin">
            <el-input v-model="ruleForm.weixin"></el-input>
          </el-form-item> -->
          <el-form-item label="状态：">
            <el-switch v-model="ruleForm.flag" :active-value="1" :inactive-value="0" active-color="#409eff"
              inactive-color="#dcdfe6">
            </el-switch>
          </el-form-item>
          <!-- <el-form-item label="推荐：">
            <el-switch v-model="ruleForm.elite" :active-value="1" :inactive-value="0" active-color="#409eff"
              inactive-color="#dcdfe6">
            </el-switch>
          </el-form-item> -->
          <el-form-item label="头像：">
            <el-upload :file-list="fileList" :limit="1" :action="adminApi.upload_url" name="image"
              list-type="picture-card" :on-success="handleAvatarSuccess" :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <!-- <el-form-item label="微信二维码：">
            <el-upload :file-list="fileList1" :limit="1" :action="adminApi.upload_url" name="image"
              list-type="picture-card" :on-success="handleAvatarSuccess1" :on-remove="handleRemove1">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="客服简介：" prop="intro">
            <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="ruleForm.intro">
            </el-input>
          </el-form-item> -->
          <el-form-item class="mar_T_50">
            <el-button style="width: 120px;" icon="el-icon-thumb" type="primary"
              @click="submitForm('ruleForm')">保存</el-button>
            <el-button style="width: 120px;" icon="el-icon-back" type="info" @click="back()">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import UploadOne from "../../components/upload/UploadOne";
export default {
  components: {
    UploadOne,
  },
  data() {
    return {
      loading: false,
      ruleForm: {
        id: 0,
        house_id: 0,
        title: "",
        mobile: "",
        weixin: "",
        headimg: "",
        intro: "",
        orders: 0,
        elite: 1,
        flag: 1,
        wxcode: "",
      },
      fileList: [],
      fileList1: [],
      houseData: [],
      rules: {
        title: [{ required: true, message: "请输入客服名称", trigger: "blur" }],
        mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
      },
    };
  },
  mounted() {
    var that = this;
    var query = that.$route.query;
    if (query.id) {
      that.ruleForm.id = query.id;
      that.getDetail();
    }
    that.getHouse();
  },
  methods: {

    handleRemove(file, fileList) {
      this.ruleForm.headimg = "";
    },

    handleAvatarSuccess(res, file) {
      console.log(res);
      this.ruleForm.headimg = res.data.img_url;
    },

    handleRemove1(file, fileList1) {
      this.ruleForm.wxcode = "";
    },

    handleAvatarSuccess1(res, file) {
      this.ruleForm.wxcode = res.img_url;
    },

    getDetail() {
      var that = this;
      that.axios.post("/service/detail", { id: that.ruleForm.id }).then((res) => {
        if (res) {
          if (res.data) {
            this.ruleForm = res.data;
            this.fileList = [{
              name: '插图',
              url: res.data.headimg
            }];
            this.fileList1 = [{
              name: '插图',
              url: res.data.wxcode
            }];
          }
          that.loading = false;
        }
      });
    },

    getHouse() {
      var that = this;
      that.axios.post("/getHouse").then((res) => {
        if (res.code == 200) {
          that.houseData = res.data;
        }
      });
    },


    submitForm(formName) {
      const that = this;
      console.log(that.ruleForm);
      that.$refs[formName].validate((valid) => {
        if (!valid) return that.$message.warning("请完整填写内容!");
        var formData = {};
        formData = that.ruleForm;
        var url = "/service/beforeSave";
        that.axios.post(url, formData).then(() => {
          that.$message.success(that.id ? "修改成功" : "添加成功");
          that.$router.push("/service/index");
        });
      });
    },

    /**
     * 返回
     */
    back() {
      this.$router.push("/service/index");
    },
  },
};
</script>
<style>
.el-upload-list--picture-card .el-upload-list__item {
  width: 60px;
  height: 60px;
}

.el-upload--picture-card {
  width: 60px;
  height: 60px;
  line-height: 60px;
}
</style>